<template>
    <div id="app">
        <div id="nav">
            <router-link to="/">Home</router-link>|
            <router-link to="/about">About</router-link>
        </div>
        <router-view />
    </div>
</template>

<script>
import axios from 'axios';

export default {
    created () {
        // 网上的demo
        this.getDiscList();
        // 我自己从qq音乐新找的一个接口
        this.getMusic();
    },
    methods: {
        getDiscList () {
            const url = '/api/getDiscList'
            const commonParams = {
                picmid: 1,
                g_tk: 5381,
                jsonCallback: 'getPlaylist',
                loginUin: 0,
                inCharset: 'utf8',
                notice: 0
            };
            const data = Object.assign({}, commonParams, {
                // 以下参数自行参考源json文件的Query String Parameters
                platform: 'yqq',
                uin: 0,
                needNewCode: 0,
                hostUin: 0,
                sin: 0,
                ein: 29,
                sortId: 5,
                rnd: Math.random(),
                categoryId: 10000000,
                format: 'json'
            })
            return axios.get(url, {
                params: data
            }).then((res) => {
                return Promise.resolve(res.data)
            })
        },
        getMusic () {
            const url = '/api/getMusic'

            // 自己去看下公共参数
            // const commonParams = {
            //     picmid: 1,
            //     g_tk: 5381,
            //     jsonCallback: 'getPlaylist',
            //     loginUin: 0,
            //     inCharset: 'utf8',
            //     notice: 0
            // };
            const data = Object.assign({}, {
                // 以下参数自行参考源json文件的Query String Parameters
                '-': 'recom10636342211497007',
                g_tk: 5381,
                loginUin: 0,
                hostUin: 0,
                format: 'json',
                inCharset: 'utf8',
                outCharset: 'utf8',
                notice: 0,
                platform: 'yqq.json',
                needNewCode: 0,
                data: '{"comm":{"ct":24},"category":{"method":"get_hot_category","param":{"qq":""},"module":"music.web_category_svr"},"recomPlaylist":{"method":"get_hot_recommend","param":{"async":1,"cmd":2},"module":"playlist.HotRecommendServer"},"playlist":{"method":"get_playlist_by_category","param":{"id":8,"curPage":1,"size":40,"order":5,"titleid":8},"module":"playlist.PlayListPlazaServer"},"new_song":{"module":"newsong.NewSongServer","method":"get_new_song_info","param":{"type":5}},"new_album":{"module":"newalbum.NewAlbumServer","method":"get_new_album_info","param":{"area":1,"sin":0,"num":10}},"new_album_tag":{"module":"newalbum.NewAlbumServer","method":"get_new_album_area","param":{}},"toplist":{"module":"musicToplist.ToplistInfoServer","method":"GetAll","param":{}},"focus":{"module":"QQMusic.MusichallServer","method":"GetFocus","param":{}}}'
            })
            return axios.get(url, {
                params: data
            }).then((res) => {
                return Promise.resolve(res.data)
            })
        }
    }
}
</script>

<style lang="scss">
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}
#nav {
    padding: 30px;
    a {
        font-weight: bold;
        color: #2c3e50;
        &.router-link-exact-active {
            color: #42b983;
        }
    }
}
</style>
